<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="index2.css"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>场景练习</title>
	</head>
	<body>
		<div class="all">
			<img src="fish.png" class="fish" />
			<img src="text.png" class="text" />
			<div class="water"></div>
			<img src="ice.png" class="ice" />
			<img src="first-fish.png" class="fist-fish"/>
			<img src="second-fish.png" class="second-fish"/>
			<img src="bubble.png"/ class="bubble">
			<img src="weixin.png"/ class="weixin">
			<div class="musicPlay" onvlick="playPause()"></div>
			<!--通过audio标签加载音频-->
			<!--loop循环播放-->
			<audio id="music" loop preload="preload">
			<source src="Breathandlife.mp3" >
				您的浏览器不支持HTML5,换个浏览器吧！
		</div>
	</body>
</html>
<script type="text/javascript">
    //'=' 为赋值符号
	var audio = document.getElementById('music')
	var musicPlay = document.getElementsByClassName('musicPlay')
	function playPause(){
		//判断音频是否正在播放
		//paused暂停
		//audio.paused获取到的值有两种情况：true（暂停）和false（播放）
		if(auto.paused == true){
			//如果音频是暂停的，那么就播放
			musicPlay.style.backgroundImage = "url(sound.png)";
			audio.play();	
		}
		else(){
			//否则就暂停
			audio.pause();
			musicPlay.style.backgroundImage = "url(muted.png)";
		}
	}
</script>